<!DOCTYPE html>
<html>
<head>
    <title>海报信息表</title>
    <#include "/header.html">
</head>
<body>
<style>
    body, html {
        margin: 0;
        padding: 0;
        background-color: #F1F1F1;
    }

    #posterBox {
        position: relative;
        box-sizing: border-box;
        min-height: 1334px;
        width: 750px;
        background-color: #F0F0F0;
        border: 1px solid black;
        font-size: 26px;
        /*font-weight: bold;*/
    }

    #posterBox > * {
        position: absolute;
        box-sizing: border-box;
        max-width: 750px;
        line-height: 1;
        cursor: pointer;
    }

    #posterBox > .pitch {
        box-sizing: border-box;
        border: 1px solid red;
    }

    input[type="range"] {
        -webkit-appearance: none;
        width: 100%;
        height: 8px;
        border-radius: 10px;
        background-color: #fff;
    }

    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
    }

    input[type="range"]::-webkit-slider-runnable-track {
        height: 8px;
        border-radius: 20px;
        cursor: pointer;
    }

    input[type="range"]:focus {
        outline: none;
    }

    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        margin-top: -3px;
        height: 14px;
        width: 14px;
        background: #eb7470;
        border-radius: 50%;
        border: solid 3px #fff;
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
    }

    ol#doMain > li {
        margin-bottom: 20px;
        width: 220px;
    }
</style>
<div id="rrapp" v-cloak>
    <div class="panel-heading">{{title}}</div>
    <form class="form-horizontal" style="position: fixed;z-index: 999;left: 800px;">
        <div class="form-group">
            <div class="col-sm-2 control-label">关联海报id</div>
            <div class="col-sm-10">
                <input disabled type="text" class="form-control" id="posterInfoId" placeholder="关联海报信息表id"/>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label">海报详情类型</div>

            <div class="col-sm-10">
                <select id="item" class="form-control" v-model="bPosterDetails.item">
                    <option value="-1" disabled selected hidden>请选择海报详情类型</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label">操作</div>
            <div class="col-sm-10">
                <input type="button" class="btn btn-primary" id="addEle" value="新增"/>
                <input type="button" class="btn btn-warning" id="uploadEle" value="修改"/>
                <input type="button" class="btn btn-primary" id="delEle" value="删除"/>
                <input type="button" class="btn btn-warning" id="saveEle" value="保存"/>
                <input type="button" class="btn btn-primary" id="backEle" value="返回"/>
            </div>
            <!-- 文件选择框 默认关闭 点击图片后调出 -->
            <input type="file" name="currImg" id="currImg" style="display: none;"/>
            <input type="file" name="uploadImg" id="uploadImg" style="display: none;"/>
        </div>

        <div class="form-group" id="kuanDu" style="margin-top: 40px">
            <div class="col-sm-2 control-label">宽度</div>
            <div class="col-sm-10">
                <input type="range" value="0" min="0" max="0" id="setWidth"/><span>0</span><span
                    style="position: absolute;right: 0;">0</span>
            </div>
        </div>

        <div class="form-group" id="gaoDu" style="margin-top: 40px">
            <div class="col-sm-2 control-label">高度</div>
            <div class="col-sm-10">
                <input type="range" value="0" min="0" max="0" id="setHeight"/><span>0</span><span
                    style="position: absolute;right: 0;">0</span>
            </div>
        </div>

        <div class="form-group" style="margin-top: 40px">
            <div class="col-sm-2 control-label">左边距离</div>
            <div class="col-sm-10">
                <input type="range" value="0" min="0" max="0" id="setLeft"/><span>0</span><span
                    style="position: absolute;right: 0;">0</span>
            </div>
        </div>

        <div class="form-group" style="margin-top: 40px">
            <div class="col-sm-2 control-label">上边距离</div>
            <div class="col-sm-10">
                <input type="range" value="0" min="0" max="0" id="setTop"/><span>0</span><span
                    style="position: absolute;right: 0;">0</span>
            </div>
        </div>

        <div class="form-group" style="margin-top: 40px">
            <div class="col-sm-2 control-label">角度</div>
            <div class="col-sm-10">
                <input type="range" value="0" min="0" max="0" id="setRotate"/><span>0</span><span
                    style="position: absolute;right: 0;">0</span>
            </div>
        </div>

        <div class="form-group" id="yanSe" style="margin-top: 40px">
            <div class="col-sm-2 control-label">文字颜色</div>
            <div class="col-sm-10">
                <input type="color" value="" id="setColor"/>
                <span></span>
            </div>
        </div>

        <div class="form-group" id="daXiao" style="margin-top: 40px;">
            <div class="col-sm-2 control-label">文字大小</div>
            <div class="col-sm-10" style="display: flex;">
                <input type="button" class="btn btn-warning" id="loseFontSize" value="-"/>
                <input type="text" value="0" id="setFontSize" disabled class="form-control"
                       style="text-align: center; width: 100px;"/>
                <input type="button" class="btn btn-primary" id="addFontSize" value="+"/>
            </div>
        </div>

        <div class="form-group" id="huDu" style="margin-top: 40px">
            <div class="col-sm-2 control-label">头像形状</div>
            <div class="col-sm-10">
                <label class="radio-inline">
                    <input type="radio" name="radius" value="0"/> 方形
                </label>
                <label class="radio-inline">
                    <input type="radio" name="radius" value="1"/> 圆形
                </label>
            </div>
        </div>

        <!--        <ol id="doMain" style="position: fixed;z-index: 999;left: 800px;top: 20vh;">-->
        <!--            <li>宽度：<input type="range" value="0" min="0" max="0" id="setWidth"/><span>0</span><span-->
        <!--                    style="position: absolute;right: 0;">0</span></li>-->
        <!--            <li>高度：<input type="range" value="0" min="0" max="0" id="setHeight"/><span>0</span><span-->
        <!--                    style="position: absolute;right: 0;">0</span></li>-->
        <!--            <li>左边距离：<input type="range" value="0" min="0" max="0" id="setLeft"/><span>0</span><span-->
        <!--                    style="position: absolute;right: 0;">0</span></li>-->
        <!--            <li>上边距离：<input type="range" value="0" min="0" max="0" id="setTop"/><span>0</span><span-->
        <!--                    style="position: absolute;right: 0;">0</span></li>-->
        <!--            <li>弧度：<input type="range" value="0" min="0" max="100" id="setRadius"/><span>0</span><span-->
        <!--                    style="position: absolute;right: 0;">0</span></li>-->
        <!--            &lt;!&ndash;            <li>旋转角度：<input type="range" value="0" min="0" max="0" id="setRotate"/><span>0</span><span&ndash;&gt;-->
        <!--            &lt;!&ndash;                    style="position: absolute;right: 0;">0</span></li>&ndash;&gt;-->
        <!--        </ol>-->
    </form>
    <section id="posterBox" style=""></section>
</div>

<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.0.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    var vm = new Vue({
        el: '#rrapp',
        data: {
            title: null,
            list: null,
            bPosterDetails: {}
        },
        methods: {}
    });

    // 海报分类
    var bPosterDictEntity = {
        number: 2
    };
    $.ajax({
        type: "POST",
        async: false,
        url: baseURL + 'sys/bposterdict/queryAll',
        contentType: "application/json",
        data: JSON.stringify(bPosterDictEntity),
        success: function (r) {
            if (r.code == 0) {
                for (var i = 0; i < r.bPosterDict.length; i++) {
                    $("#item").append(
                        "<option value=" + r.bPosterDict[i].id + ">" + r.bPosterDict[i].name + "</option>");
                }
            }
        }
    });

    // 根据参数名获取参数值
    function getQueryStringByName(name) {
        var result = location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
        if (result == null || result.length < 1) {
            return "";
        }
        return result[1];
    };

    //兼容的获取当前样式的任意属性值
    function getStyle(element) {
        if (window.getComputedStyle) {
            return window.getComputedStyle(element, null);
        } else {
            return element.currentStyle;
        }
    }

    // 海报详情
    $('#posterInfoId').val(getQueryStringByName('id'));

    var bPosterDetailsEntity = {
        type: getQueryStringByName('id')
    };
    $.ajax({
        type: "POST",
        async: false,
        url: baseURL + 'sys/bposterdetails/queryAll',
        contentType: "application/json",
        data: JSON.stringify(bPosterDetailsEntity),
        success: function (r) {
            if (r.code == 0) {
                console.log(r.bPosterDetails);

                for (var i = 0; i < r.bPosterDetails.length; i++) {
                    let index = r.bPosterDetails[i].item + "-" + genID();

                    // 海报底图
                    if (r.bPosterDetails[i].item == 1011 || r.bPosterDetails[i].item == 1012 || r.bPosterDetails[i].item == 1013 || r.bPosterDetails[i].item == 1014) {
                        $("#posterBox").append("<img id=" + index + " title=" + r.bPosterDetails[i].remark + " src=" + r.bPosterDetails[i].imange + " style='width:" + r.bPosterDetails[i].width + "px;height:" + r.bPosterDetails[i].height + "px;left:" + r.bPosterDetails[i].lefts + "px;top:" + r.bPosterDetails[i].top + "px;border-radius:" + r.bPosterDetails[i].radius + "px;transform: rotate(" + r.bPosterDetails[i].rotate + "deg);'>");
                    }

                    // 海报文字
                    if (r.bPosterDetails[i].item == 1015 || r.bPosterDetails[i].item == 1016 || r.bPosterDetails[i].item == 1017 || r.bPosterDetails[i].item == 1018 || r.bPosterDetails[i].item == 1019 || r.bPosterDetails[i].item == 1020) {
                        let colors = r.bPosterDetails[i].color;
                        let size = r.bPosterDetails[i].size;

                        if (colors == "") {
                            colors = "#000000";
                        }

                        if (size < 12) {
                            size = 26;
                        }

                        $("#posterBox").append("<div contenteditable=\"true\" id=" + index + " title=" + r.bPosterDetails[i].remark + " style='left:" + r.bPosterDetails[i].lefts + "px;top:" + r.bPosterDetails[i].top + "px;color:" + colors + ";font-size:" + size + "px;transform: rotate(" + r.bPosterDetails[i].rotate + "deg);'>" + r.bPosterDetails[i].text + "</div>");
                    }

                    console.log(r.bPosterDetails[i].remark);
                }
            }
        }
    });

    /**
     * 以prototype原型的方式，给string字符串类型添加方法，用于实现颜色值格式的转换。
     *
     * RGB转换为16进制
     *
     * 使用方式：
     * "rgb(255,255,255)".colorHex();  // #ffffff
     */
    String.prototype.colorHex = function () {
        // RGB颜色值的正则
        var reg = /^(rgb|RGB)/;
        var color = this;
        if (reg.test(color)) {
            var strHex = "#";
            // 把RGB的3个数值变成数组
            var colorArr = color.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
            // 转成16进制
            for (var i = 0; i < colorArr.length; i++) {
                var hex = (Number)(colorArr[i]).toString(16);
                if (hex === "0") {
                    hex += hex;
                }
                hex = hex.length == 1 ? '0' + hex : hex;
                strHex += hex;
            }
            return strHex;
        } else {
            return String(color);
        }
    };

    /**
     * 16进制转换为RGB
     *
     * 使用方式：
     * "#fff".colorRgb(); // rgb(255,255,255)
     * "#ffffff".colorRgb(); // rgb(255,255,255)
     */
    String.prototype.colorRgb = function () {
        // 16进制颜色值的正则
        var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
        // 把颜色值变成小写
        var color = this.toLowerCase();
        if (reg.test(color)) {
            // 如果只有三位的值，需变成六位，如：#fff => #ffffff
            if (color.length === 4) {
                var colorNew = "#";
                for (var i = 1; i < 4; i += 1) {
                    colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
                }
                color = colorNew;
            }
            // 处理六位的颜色值，转为RGB
            var colorChange = [];
            for (var i = 1; i < 7; i += 2) {
                colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
            }
            return "RGB(" + colorChange.join(",") + ")";
        } else {
            return color;
        }
    };

    // 选择元素
    $('#posterBox').on('click', '*', function () {
        $("input[name='radius'][value='0']").prop("checked", "checked");
        $("#yanSe").hide();
        $("#daXiao").hide();

        if ($(this).hasClass('pitch')) {
            $(this).removeClass('pitch');

            $('#setWidth').attr("max", 0);
            $('#setHeight').attr("max", 0);
            $('#setLeft').attr("max", 0);
            $('#setTop').attr("max", 0);
            $('#setRadius').attr("max", 0);
            $('#setRotate').attr("max", 0);

            $('#setWidth').val(0);
            $('#setHeight').val(0);
            $('#setLeft').val(0);
            $('#setTop').val(0);
            $('#setRadius').val(0);
            $('#setRotate').val(0);
            $('#setFontSize').val(0);

            $('#setWidth').next().html(0 + "px");
            $('#setHeight').next().html(0 + "px");
            $('#setLeft').next().html(0 + "px");
            $('#setTop').next().html(0 + "px");
            $('#setRadius').next().html(0 + "px");

            $('#setWidth').next().next().html(0 + "px");
            $('#setHeight').next().next().html(0 + "px");
            $('#setLeft').next().next().html(0 + "px");
            $('#setTop').next().next().html(0 + "px");
            $('#setRadius').next().next().html(0 + "px");
        } else {
            $(this).addClass('pitch').siblings('.pitch').removeClass('pitch');

            let nums = $('.pitch').length;
            if (nums == 1) {
                let pitchIDs = $('.pitch')[0].getAttribute("id");
                let pitchID = pitchIDs.slice(0, pitchIDs.length - 7);

                // 头像显示弧度可编辑
                if (pitchID == 1012) {
                    $("#kuanDu").show();
                    $("#gaoDu").show();
                    $("#huDu").show();
                }

                if (pitchID == 1011 || pitchID == 1013 || pitchID == 1014) {
                    $("#kuanDu").show();
                    $("#gaoDu").show();
                    $("#huDu").hide();
                }

                if (pitchID == 1015 || pitchID == 1016 || pitchID == 1017 || pitchID == 1018 || pitchID == 1019|| pitchID == 1020) {
                    $("#kuanDu").hide();
                    $("#gaoDu").hide();
                    $("#huDu").hide();
                    $("#yanSe").show();
                    $("#daXiao").show();
                }
            }

            const thisWidth = $(this)[0].offsetWidth;
            const thisHeight = $(this)[0].offsetHeight;
            const thisLeft = $(this)[0].offsetLeft;
            const thisTop = $(this)[0].offsetTop;
            const thisRadius = (Number)($(this)[0].style.borderRadius.replace("px", ""));
            const thisColor = $(this)[0].style.color.colorHex();
            const thisFontSize = (Number)(window.getComputedStyle(document.querySelector(".pitch")).fontSize.replace("px", ""));

            /* 获取元素角度 start */
            let tr, angle;
            try {
                tr = $(this).css('transform');
                // With rotate(30deg)...
                // matrix(0.866025, 0.5, -0.5, 0.866025, 0px, 0px)
                console.log('Matrix: ' + tr);
                // rotation matrix - http://en.wikipedia.org/wiki/Rotation_matrix
                const values = tr.split('(')[1].split(')')[0].split(',');
                const a = values[0];
                const b = values[1];
                const c = values[2];
                const d = values[3];
                const scale = Math.sqrt(a * a + b * b);
                console.log('Scale: ' + scale);
                // arc sin, convert from radians to degrees, round
                const sin = b / scale;
                // next line works for 30deg but not 130deg (returns 50);
                // var angle = Math.round(Math.asin(sin) * (180/Math.PI));
                angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
            } catch (e) {
                //TODO handle the exception
                if (tr == "none") {
                    angle = 0;
                }
            }
            console.log('Rotate: ' + angle + 'deg');
            /* 获取元素角度 end */

            console.log(thisWidth);
            console.log(thisHeight);
            console.log(thisLeft);
            console.log(thisTop);
            console.log(thisRadius);
            console.log(thisColor);
            console.log(thisFontSize);

            const radius = (Number)($('.pitch')[0].style.borderRadius.replace("px", ""));
            if (radius > 0) {
                $("input[name='radius'][value='1']").prop("checked", "checked");
                console.log("圆形");
            } else {
                $("input[name='radius'][value='0']").prop("checked", "checked");
                console.log("方形");
            }
            console.log("======== 分割线 ========");

            const maxWidth = $(this)[0].parentNode.offsetWidth;
            const maxHeight = $(this)[0].parentNode.offsetHeight;
            const maxLeft = maxWidth - $(this)[0].offsetWidth;
            const maxTop = maxHeight - $(this)[0].offsetHeight;
            const maxRadius = thisWidth > thisHeight ? thisWidth : thisHeight;
            const maxRotate = 360;

            console.log(maxWidth);
            console.log(maxHeight);
            console.log(maxLeft);
            console.log(maxTop);
            console.log(maxRadius);
            console.log(maxRotate);
            console.log("======== 分割线 ========");

            $('#setWidth').attr("max", maxWidth);
            $('#setHeight').attr("max", maxHeight);
            $('#setLeft').attr("max", maxLeft);
            $('#setTop').attr("max", maxTop);
            // $('#setRadius').attr("max", maxRadius);
            $('#setRotate').attr("max", maxRotate);

            $('#setWidth').val(thisWidth);
            $('#setHeight').val(thisHeight);
            $('#setLeft').val(thisLeft);
            $('#setTop').val(thisTop);
            $('#setColor').val(thisColor);
            $('#setFontSize').val(thisFontSize + "px");
            // $('#setRadius').val(thisRadius);
            $('#setRotate').val(angle);

            $('#setWidth').next().html(thisWidth + "px");
            $('#setHeight').next().html(thisHeight + "px");
            $('#setLeft').next().html(thisLeft + "px");
            $('#setTop').next().html(thisTop + "px");
            $('#setColor').next().html(thisColor);
            // $('#setRadius').next().html(thisRadius + "px");
            $('#setRotate').next().html(angle + "°");

            $('#setWidth').next().next().html(maxWidth + "px");
            $('#setHeight').next().next().html(maxHeight + "px");
            $('#setLeft').next().next().html(maxLeft + "px");
            $('#setTop').next().next().html(maxTop + "px");
            // $('#setRadius').next().next().html(maxRadius + "px");
            $('#setRotate').next().next().html(maxRotate + "°");
        }
    })
    ;

    // 控制元素 width
    $('#setWidth').on('change', function () {
        const w = $(this).val() + "px";
        console.log(w);
        $(this).next().html(w);
        $('.pitch').css("width", w);
    });

    // 控制元素 height
    $('#setHeight').on('change', function () {
        const h = $(this).val() + "px";
        console.log(h);
        $(this).next().html(h);
        $('.pitch').css("height", h);
    });

    // 控制元素 left
    $('#setLeft').on('change', function () {
        const l = $(this).val() + "px";
        console.log(l);
        $(this).next().html(l);
        $('.pitch').css("left", l);
    });

    // 控制元素 top
    $('#setTop').on('change', function () {
        const t = $(this).val() + "px";
        console.log(t);
        $(this).next().html(t);
        $('.pitch').css("top", t);
    });

    // 控制元素 color
    $('#setColor').on('change', function () {
        const c = $(this).val();
        console.log(c);
        $(this).next().html(c);
        $('.pitch').css("color", c);
        // document.getElementById('setColor').click(); // 必须添加触发click事件否则不能通过点击确定按钮触发更改颜色
    });

    // 控制元素 font-size
    $('#loseFontSize').on('click', function () {
        let fs = (Number)(window.getComputedStyle(document.querySelector(".pitch")).fontSize.replace("px", ""));
        fs--;
        if (fs < 12) fs = 12;

        console.log(fs);
        $('#setFontSize').val(fs + "px");
        $('.pitch')[0].style['font-size'] = fs + 'px';
    });

    $('#addFontSize').on('click', function () {
        let fs = (Number)(window.getComputedStyle(document.querySelector(".pitch")).fontSize.replace("px", ""));
        fs++;
        if (fs > 100) fs = 100;

        console.log(fs);
        $('#setFontSize').val(fs + "px");
        $('.pitch')[0].style['font-size'] = fs + 'px';
    });

    // 控制元素 radius
    $("input[name='radius']").on('change', function () {
        const v = $("input[name='radius']:checked").val();

        const tw = $('.pitch')[0].offsetWidth;
        const th = $('.pitch')[0].offsetHeight;

        const r = Math.ceil((tw > th ? tw : th) / 2);
        if (v == 1) {
            $('.pitch').css("border-radius", r + "px");
        } else {
            $('.pitch').css("border-radius", 0);
        }
        // const r = $(this).val() + "px";
        // console.log(r);
        // $(this).next().html(r);
        // $('.pitch').css("border-radius", r);
    });

    // 控制元素 rotate
    $('#setRotate').on('change', function () {
        const r = $(this).val().replace("°", "");
        console.log(r);
        $(this).next().html(r + "°");
        $('.pitch').css("transform", "rotate(" + r + "deg)");
        // $('.pitch').css("-ms-transform", "rotate(" + r + ")");
        // $('.pitch').css("-moz-transform", "rotate(" + r + ")");
        // $('.pitch').css("-webkit-transform", "rotate(" + r + ")");
        // $('.pitch').css("-o-transform", "rotate(" + r + ")");
    });

    // 添加元素
    $('#addEle').click(function () {
        let seleItem = $('#item').val();
        let ItemName = $('#item option:selected').text();
        let posterBox = document.getElementById('posterBox');
        let appendId = seleItem + "-" + genID();

        // 添加头像占位图元素
        if (seleItem == 1012) {
            // 创建img元素
            let img = document.createElement("img");
            img.setAttribute("id", appendId);
            img.setAttribute("title", ItemName);
            img.setAttribute("src", "http://zktfile.wxslzf.com/posterCurrImg/20201211/image9336135.jpg");

            img.style.width = "163px";
            posterBox.appendChild(img);

            alert('添加成功！');
            return;
        }

        // 添加二维码占位图元素
        if (seleItem == 1013) {
            // 创建img元素
            let img = document.createElement("img");
            img.setAttribute("id", appendId);
            img.setAttribute("title", ItemName);
            img.setAttribute("src", "http://zktfile.wxslzf.com/posterCurrImg/20201211/image3156332.jpg");

            img.style.width = "163px";
            posterBox.appendChild(img);

            alert('添加成功！');
            return;
        }

        // 添加预设图片
        if (seleItem == 1011 || seleItem == 1012 || seleItem == 1013 || seleItem == 1014) {
            $('#currImg').click();
        }

        // 添加预设文字
        if (seleItem == 1015 || seleItem == 1016 || seleItem == 1017 || seleItem == 1018 || seleItem == 1019|| seleItem == 1020) {
            let text = "";
            if (seleItem == 1015) {
                text = "#姓名占位符#";
            }
            if (seleItem == 1016) {
                text = "#电话占位符#";
            }
            if (seleItem == 1017) {
                text = "#公司占位符#";
            }

            if (seleItem == 1018) {
                text = "#文字1占位符#";
            }
            if (seleItem == 1019) {
                text = "#文字2占位符#";
            }
            if (seleItem == 1020) {
                text = "#文字3占位符#";
            }
            // text = prompt("请填写调试的" + ItemName + "占位文字!", text);
            // if (text != null && text != "") {
            // 创建div元素
            let div = document.createElement("div");
            div.setAttribute("id", appendId);
            div.setAttribute("title", ItemName);
            div.setAttribute("contenteditable", "true");
            div.innerHTML = text;

            posterBox.appendChild(div);
            // }
        }
    });

    // 修改元素
    $('#uploadEle').on('click', function () {
        let nums = $('.pitch').length;
        if (nums == null || nums == 0) {
            alert('您还没有选择要修改的元素！');
            return;
        }

        let pitchIDs = $('.pitch')[0].getAttribute("id");
        let pitchID = pitchIDs.slice(0, pitchIDs.length - 7);

        if (pitchID == 1011 || pitchID == 1012 || pitchID == 1013 || pitchID == 1014) {
            $('#uploadImg').click();
        }
    });

    // 删除元素
    $('#delEle').on('click', function () {
        let nums = $('.pitch').length;
        if (nums == null || nums == 0) {
            alert('您还没有选择要删除的元素！');
            return;
        }

        confirm('确定要删除元素？', function () {
            $('.pitch').remove();
            alert('删除成功！');
        })
    });

    // 选取文件后回显当前显示图片
    $('#currImg').change(function (e) {
        // 当前选择的文件
        let files = e.target.files;
        let length = files.length;

        console.log("currImg " + length);

        upload(files[0], "posterCurrImg");
    });

    // 选取文件后回显当前显示图片
    $('#uploadImg').change(function (e) {
        // 当前选择的文件
        let files = e.target.files;
        let length = files.length;

        console.log("uploadImg " + length);

        upload(files[0], "posterUploadImg");
    });

    function upload(file, pathname) {
        console.log(file);
        console.log(pathname);
        let client = new window.OSS({
            region: 'oss-cn-shenzhen', // 你的oss地址，hangzhou，shanghai，shenzhen
            accessKeyId: 'LTAI4Fh7PnYLw3uQvoUYiazS', //你的ak
            accessKeySecret: 'cEw7e8QMz0h4XY4qmzCoTzhHITqyUU', //你的secret
            //stsToken: '<Your securityToken(STS)>',//这里我暂时没用，注释掉
            bucket: 'zktuistatic', //你的oss名字
        });

        // 组装文件名
        let date = new Date();
        let yeaer = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        if (month < 10) {
            month = "0" + month;
        }
        if (day < 10) {
            day = "0" + day;
        }
        let datePath = yeaer + "" + month + "" + day;
        let key = "";
        key = pathname + "/" + datePath + "/image" + String(parseInt(Math.random() * 10000000, 10) + getFileExtendingName(
            file.name));

        client.put(key, file).then(function () {
            return client.get(key);
        }).then(function (ret) {
            console.log(ret.res.requestUrls[0]);
            let reqUrl = ret.res.requestUrls[0].replace("http://zktuistatic.oss-cn-shenzhen.aliyuncs.com/", "http://zktfile.wxslzf.com/");
            console.log(pathname);

            // 操作图片上传时下拉框的内容
            let seleItem = $('#item').val();
            let ItemName = $('#item option:selected').text();

            // 新增图片
            if (pathname == "posterCurrImg") {
                // 如果没有，就创建img元素
                let posterBox = document.getElementById('posterBox');
                let img = document.createElement("img");
                let imgId = seleItem + "-" + genID();

                img.setAttribute("id", imgId);
                img.setAttribute("title", ItemName);
                img.setAttribute("src", reqUrl);

                img.style.width = "100px";
                posterBox.appendChild(img);

                alert('添加成功！');
            }

            // 修改图片
            if (pathname == "posterUploadImg") {
                let nums = $('.pitch').length;
                if (nums == null || nums == 0) {
                    alert('您还没有选择要修改的元素！');
                    return;
                }

                let pitchID = 0;
                let pitchIDs = 0;
                if (nums > 0) {
                    pitchIDs = $('.pitch')[0].getAttribute("id");
                    pitchID = pitchIDs.slice(0, pitchIDs.length - 7);
                }

                // 如果有，就是修改元素
                if (nums == 1 && pitchID != 0 && pitchIDs != 0) {
                    $("#" + pitchIDs).attr("src", reqUrl);
                    alert('修改成功！');
                }
            }
        }).catch(function (err) {
            console.log(err);
        });
    }

    function getFileExtendingName(filename) {
        // 文件扩展名匹配正则
        var reg = /\.[^\.]+$/;
        var matches = reg.exec(filename);
        if (matches) {
            return matches[0];
        }
        return '';
    };

    // 生成6位随机ID
    function genID() {
        return Math.floor(Math.random() * (999999 - 100000)) + 100000;
    };

    // 保存
    $('#saveEle').click(function () {
        let posterId = getQueryStringByName('id');
        let bigInfos = [];

        let bigInfosLen = $('#posterBox > *').length;

        for (let i = 0; i < bigInfosLen; i++) {
            let index = $('#posterBox > *')[i].getAttribute("id");
            let item = index.slice(0, index.length - 7);
            let remark = $('#posterBox > *')[i].getAttribute("title");
            let imange = $('#posterBox > *')[i].getAttribute("src");
            let text = $('#posterBox > *')[i].textContent;
            let width = $('#posterBox > *')[i].offsetWidth;
            let height = $('#posterBox > *')[i].offsetHeight;
            let lefts = $('#posterBox > *')[i].offsetLeft;
            let top = $('#posterBox > *')[i].offsetTop;
            let radius = (Number)($('#posterBox > *')[i].style.borderRadius.replace("px", ""));
            let color = window.getComputedStyle($('#posterBox > *')[i]).color.colorHex();
            let size = (Number)(window.getComputedStyle($('#posterBox > *')[i]).fontSize.replace("px", ""));
            let angle = $('#posterBox > *')[i].style.transform.replace("rotate(", "").replace("deg)", "");

            if (angle == "none" || angle == "" || angle == undefined) {
                angle = 0;
            }
            console.log('Rotate: ' + angle + 'deg');
            /* 获取元素角度 end */


            if (item == 1011 || item == 1012 || item == 1013 || item == 1014) {
                text = "";
                color = "";
                size = "";
            }

            if (item == 1015 || item == 1016 || item == 1017 || item == 1018 || item == 1019 || item == 1020) {
                imange = "";
            }

            bigInfos.push({
                "index": index,
                "type": posterId,
                "item": item,
                "remark": remark,
                "imange": imange,
                "text": text,
                "width": width,
                "height": height,
                "lefts": lefts,
                "top": top,
                "radius": radius,
                "color": color,
                "size": size,
                "rotate": angle
            });
        }
        console.log(bigInfos);

        let url = "sys/bposterdetails/saveEle";
        $.ajax({
            type: "POST",
            url: baseURL + url,
            contentType: "application/json",
            data: JSON.stringify(bigInfos),
            success: function (r) {
                if (r.code === 0) {
                    alert('操作成功', function (index) {
                        window.opener = null;
                        window.open('', '_self');
                        window.close();
                    });
                    // window.opener = null;
                    // window.open('', '_self');
                    // window.close();
                } else {
                    alert(r.msg);
                }
            }
        });
    });

    // 返回
    $('#backEle').click(function () {
        confirm('您确定要关闭本页吗？', function () {
            window.opener = null;
            window.open('', '_self');
            window.close();
        })
    });
</script>
</body>
</html>
